<template>
  <div
    id="carouselExampleCaptions"
    class="carousel slide"
    data-bs-ride="carousel"
  >
    <div class="carousel-inner" style="">
      <div class="carousel-item active">
        <img
          :src="require('@/assets/img/banner/banner-4-1280.png')"
          class="d-block w-100"
          alt="..."
          style="max-height: 500px"
        />
        <div
          class=""
          style="
            position: absolute;
            top: 4rem;
            left: 10%;
            padding-top: 1rem;
            padding-bottom: 1rem;
            color: rgb(255, 255, 255);
            text-align: center;
          "
        >
          <h3>助力企业数字化转型</h3>
          <h3>共创商业数字化价值</h3>
        </div>
      </div>
    </div>
  </div>
  <!-- ======= Services Section ======= -->
  <section class="">
    <div class="container">
      <div
        class="row row-cols-1 row-cols-md-3 g-3"
        data-aos="fade-up"
        data-aos-delay="100"
      >
        <template v-for="(item, index) in servicesData" :key="index">
          <div class="col d-flex align-items-stretch">
            <div
              class="content-box content-box-cyan text-center"
              style="width: 100%"
            >
              <div class="content-box-icon">
                <i :class="item.iconStyle"></i>
              </div>
              <h4 class="title text-center">
                {{ item.title }}
              </h4>
              <div class="description">
                <span class="text-left"> {{ item.description }}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>

  <!-- <section class="features">
      <div class="container">
        <div class="row aos-init aos-animate" data-aos="fade-up">
          <div class="col-md-7">
            <h3>软件开发合作流程</h3>
            <p class="font-italic">{{ serviceProcessData.description }}</p>

            <ul>
              <li
                v-for="(item, index) in serviceProcessData.steps"
                :key="index"
              >
                <i class="bi bi-check"></i> {{ item.title }}
              </li>
            </ul>
          </div>
          <div class="col-md-5 pt-4">
            <img
              :src="require('@/assets/img/features-2.svg')"
              class="img-fluid"
              alt=""
            />
          </div>
        </div>

        <div class="row aos-init aos-animate" data-aos="fade-up">
          <div class="col-md-5">
            <img
              :src="require('@/assets/img/features-1.svg')"
              class="img-fluid"
              alt=""
            />
          </div>
          <div class="col-md-7 pt-4">
            <h3>解决方案</h3>
            <p class="font-italic">{{ solutionData.description }}</p>
            <ul>
              <li v-for="(item, index) in solutionData.steps" :key="index">
                <i class="bi bi-check"></i> {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section> -->

  <section class="">
    <div class="container">
      <div class="section-title">
        <h2>专业的服务</h2>
      </div>
      <div class="text-center">
        <img
          class="img-fluid w-75"
          :src="require('@/assets/img/other/zhuanyefuwu.png')"
        />
      </div>
    </div>
  </section>

  <section class="">
    <div class="container">
      <div class="section-title">
        <h2>项目进度管控</h2>
      </div>
      <div class="text-center">
        <img
          class="img-fluid w-75"
          :src="require('@/assets/img/other/jinduguankong.png')"
        />
      </div>
    </div>
  </section>
</template>

<script>
import { IndexData } from "@/assets/js/data.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      servicesData: IndexData.ServicesData,
      solutionData: IndexData.SolutionData,
      serviceProcessData: IndexData.serviceProcessData,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    return {
      ...refData,
    };
  },
};
</script>
<style lang="scss" scoped>
.content-box {
  padding: 30px;
  background: #fff;
  box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14);
  transition: all 0.3s ease-in-out;
  // text-align: center;
  border: 1px solid #fff;
  border-radius: 20px;
  width: 100%;

  .content-box-icon {
    padding-top: 17px;
    display: inline-flex;

    justify-content: center;
    border-radius: 50%;
    width: 72px;
    height: 72px;

    i {
      font-size: 1.5rem;
      // line-height: 1;
    }
  }

  .title {
    margin: 20px 0px;
  }
}

.content-box-cyan {
  .content-box-icon {
    background: #e6fdfc;

    i {
      color: #3fcdc7;
    }
  }
}
</style>
